Learn the fundamentals of JavaScript to make the React journey smooth.

Android Development with Ionic and React

Most of React comes down to JavaScript ES6 and its features and syntax. The fundamentals also include ternary operators, shorthand versions in the language, objects such as “this”, and JavaScript’s built-in functions (map, reduce, filter). It also includes general concepts such as composability, reusability, immutability, or higher-order functions. While we don’t necessarily need to master all these before starting with React, they will come up while practicing it, and learning these concepts will benefit us. 
This module will give us comprehensive JavaScript skills that will make our React journey smooth and straightforward.

JavaScript Fundamentals Before Learning React

## What are Modules?

It is always recommended to define only one class per file to make it strongly cohesive. These files are basically *modules*.  So, if there are two classes Person and Student defined in the same file, you can split them into two modules and name them as `Person.js` and `Student.js`. Note that you must place these files inside your `App` directory. 

>**Did you know?** The classes defined in modules are private by default and can not be accessed by other files that exist inside your project. You can make them public by using import/export statements.

Fortunately, the JavaScript community settled on one way to import and export functionalities from files with JavaScript ES6 with [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements.

However, being new to React and JavaScript ES6, these import and export statements are just another topic which requires explanation when getting started with your first React application. Pretty early you will have your first imports for CSS, SVG or other JavaScript files. The create-react-app project already starts with those import statements:

# What are Modules?

It is always recommended to define only one class per file to make it strongly cohesive. These files are basically *modules*.  So, if there are two classes Person and Student defined in the same file, you can split them into two modules and name them as `Person.js` and `Student.js`. Note that you must place these files inside your `App` directory. 

>**Did you know?** The classes defined in modules are private by default and can not be accessed by other files that exist inside your project. You can make them public by using import/export statements.

Fortunately, the JavaScript community settled on one way to import and export functionalities from files with JavaScript ES6 with [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements.

However, being new to React and JavaScript ES6, these import and export statements are just another topic which requires explanation when getting started with your first React application. Pretty early you will have your first imports for CSS, SVG or other JavaScript files. The create-react-app project already starts with those import statements:

This lesson explains how modules are created and accessed in JavaScript. 

Modularity & Import/Export in React

This lesson explains how modules are created and accessed in JavaScript.

Getting Started

Variables, Operators & Expressions

Functions

Classes

Modules

React

Appendix

Conclusion

Modularity & Import/Export in React

What are Modules?