Gain insights into JavaScript ES6+, ternary operators, 'this' object, built-in functions, and core concepts like composability and immutability to ease your React learning journey.

esprima.tar.gz

test

After teaching React extensively (33.000+ students), be it online for a larger audience or on-site for companies transitioning to web development and React, I always come to the conclusion that React is all about JavaScript. Most of it boils down to JavaScript ES6 and beyond features and syntax, but also ternary operators, shorthand versions in the language, the 'this' object, JavaScript built-in functions (map, reduce, filter) or more general concepts such as composability, reusability, immutability or higher-order functions. While you don’t need necessarily to master all of these before starting with React, they will come up while practicing it and so to learn them will put you at a great advantage. 

This course is my attempt to give you comprehensive JavaScript skills that will make your React journey smooth and straight-forward.

JavaScript Fundamentals Before Learning React


### Modules
Remember how default objects can be exported without curly braces? So we import `React` *line 1* (referring to the code given below) as *default* and `component` as *named*. On *line 2* we import the `logo` from the logo.svg file. It was exported as default with the name `logo` from another file already. Finally, on *line 21* we export App as the *default* so it can be imported from any other file without curly braces.

$$$$
### Class component
On *line 5* a class called `App` that inherits `Component` is declared to create our class component.  Then the `render()` function is used to return *one* JSX/HTML div. Remember that the `render()` function can only return one JSX/HTML element.
$$$$
### JSX
*Lines 8-16* are written in JSX. We can't explain each line in depth, but we can give a general description of what this code block does. It first creates a div called App. Then it creates a header which contains the imported logo and the line "Welcome to react". The black part of the output image shown below is essentially the header. Then it simply outputs a paragraph with the line "To get started, edit src/App.js and save to reload."


# Modules
Remember how default objects can be exported without curly braces? So we import `React` *line 1* (referring to the code given below) as *default* and `component` as *named*. On *line 2* we import the `logo` from the logo.svg file. It was exported as default with the name `logo` from another file already. Finally, on *line 21* we export App as the *default* so it can be imported from any other file without curly braces.

$$$$
# Class component
On *line 5* a class called `App` that inherits `Component` is declared to create our class component.  Then the `render()` function is used to return *one* JSX/HTML div. Remember that the `render()` function can only return one JSX/HTML element.
$$$$
# JSX
*Lines 8-16* are written in JSX. We can't explain each line in depth, but we can give a general description of what this code block does. It first creates a div called App. Then it creates a header which contains the imported logo and the line "Welcome to react". The black part of the output image shown below is essentially the header. Then it simply outputs a paragraph with the line "To get started, edit src/App.js and save to reload."

Let's discuss the create-react-app component. By now, most of it will be self-explanatory.

Getting Started

Variables, Operators & Expressions

Functions

Classes

Modules

React

Appendix

Conclusion

The Create-react-app component

Modules