If you're curious about what makes React the most popular JavaScript framework, or feel hesitant about learning React, this article is for you. We'll go through React fundamentals in simple terms covering the following topics:
- React in a Nutshell
- Key Concepts of React
- create-react-app
- React Components
- React Props
- React State
In this article, it's assumed you know the basics and concepts of JavaScript.
React in a nutshell
React (also known as React.js or ReactJS) is a JavaScript framework created by Jordan Walke and maintained by a small team part of Facebook, led by Dan Abramov in London. React is open source and you can contribute to their GitHub repository.
It's used for building user interfaces specifically for single-page applications, that are fast to load and faster to build. React is a component-based framework with the core principle of reusing UI components.
Instead of creating DOM elements, we create React elements. react-dom will handle the events and turn them into DOM elements. This is done through React components.
React isolates the components, and re-renders that specific component which makes an app/website incredibly faster to render.
The 3 key concepts of React are:
- Passing data (unidirectional data flow)
- Returning data
- Return JSX
Unidirectional Data Flow
In React, data can only flow in one direction. As the underlying data changes, the view will update, but in order for the view layer to affect the data, an action must be triggered. There is no automatic updating. This helps to reduce overhead and makes managing data simpler.
A component can manage its own data (known as state), or can have data passed to it from another component (known as props). When either state or props changes, React will re-render the component which in turn updates the view.
Virtual DOM
React employs a virtual DOM, meaning it has a copy of the DOM in memory at all times. When the view needs to be updated, React will update this virtual DOM first. This is easy to do, because it is already in memory.
Once the Virtual DOM has been updated, React checks to see what the differences are between the Virtual DOM and the actual DOM. React can then just update the DOM nodes that have changed.
This approach is unique to React and is what made it so much quicker at rendering than its rivals.
JSX
JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.
What does “syntax extension” mean?
In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it!
If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.
Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript! JSX doesn’t add numbers - it reads them as text, just like HTML.
You need a way to write code that says, “Even though I am located in between JSX tags, treat me like ordinary JavaScript and not like JSX.”
You can do this by wrapping your code in curly braces: { your code goes here }
In JSX, you need to add slashes to all of the self-closing tags, ie: <Header /> <Home />
Event Listeners in JSX
JSX elements can have event listeners, just like HTML elements. Programming in React means constantly working with event listeners.
You create an event listener by giving a JSX element a special attribute. Here’s an example:
<img onClick={myFunc} />
An event listener attribute’s name should be something like onClick or onMouseOver: the word 'on', plus the type of event that you’re listening for. You can see a list of valid event names here.
An event listener attribute’s value should be a function. The above example would only work if myFunc were a valid function that had been defined elsewhere, like so:
function myFunc() {
alert('Good morning!');
}
<img onClick={myFunc} />
Note that in HTML, event listener names are written in all lowercase, such as click or mousemove. In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.
create-react-app
create-react-app is a NPM package that installs all necessary packages to create a React application.
Using create-react-app sets up your environment with all we need.
It comes bundled with a few features including:
ESlint: to polish your code as you write it
Jest: a testing library, for testing your code
Because its’ an npm package, it’s executed only in the terminal, as such:
npx create-react-app your-react-app
It also accepts flags to tailor the template to your needs, ie npx create-react-app --typescript. This will create you a TypeScript project.
npx is the same as npm, but it installs the latest version of npm.
You must import React from ‘react’ in each component file.
At the end, you export each new component you created:
function Hello () {
return <h1>Hello {username}!</h1>;
}
export default Hello;
Or you can instantly export it when creating the function such as:
export default function Hello () {
return <h1>Hello {username}!</h1>;
}
Then you import the created component to the file you want to use it in.
package.json comes with create-react-app and it defines dependencies. Dependencies are all the packages that need to be installed for it to run. For debugging, we have “scripts”, and you can add lint:fix for example.
package-lock.json defines more packages.
They both get installed when you run npm install.
The public folder
holds your HTML file. It takes the usual HTML boilerplate and <div id=“root”></div>.
We build our app, eg: app.js file, in the src folder.
React components
As mentioned earlier, React is a component-based framework, which means components are created with the purpose of being reused throughout the UI.
You can use several functions to create different reusable components. You basically pass in functions between files, so we can pass values onto different files.
Components are like JavaScript functions, with a different way of executing them. Components can be created with function declarations or arrow functions.
Components must be exported: export default ‘ComponentName’
Then, we import the component to the file where we want to use it: import ComponentName from “./components/ComponentName”
A component lives on a separate file. The module is the file that holds one of more components.
A component returns a piece of JSX. JSX, as explained earlier, is the syntax taken by React.
We can have the bigger components in the main App.js file and the smaller components in a components folder. But the structure is ultimately entirely up to the developer.
This is a React component:
function MyComponent (props) {
return (
<>
<h1>{props.greeting}</h1>
</>
)
};
And this is how we call a React component:
<MyComponent greeting=“Hello World” />
For example, passing a variable {myVariable}:
const myVariable = ‘This is a variable’
Then you call it by using {myVariable} in JSX.
Fragment
When you have more than one line of code to return, you wrap the content of a function inside a fragment: <> </>
It replicates a div-like wrapper where you store the code block within your components.
React props
This is the React equivalent to function parameters that are passed into functions. Best practice is to call them props when writing a component.
“You pass a prop”. This means you pass in the equivalent to a JavaScript argument into a component.
They are grouped together into an object by default.
React naturally takes all the arguments and wraps them in an object. The object is called props and you can access it by using dot notation, ie: props.name, props.age.
Props can handle functions and values, and they can have default values (ie, you can set the default to be whatever you want it to be!).
Props can be destructured in components for better readability.
React state
React State is a description of the status of the component and its features.
It's a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders.
React developers usually refer to “setting state”, where you can write methods inside your component.
It basically means controlling the state of a component and resets it for each time you call it/use it.
‘Value’ is a variable so it always returns a state.
Since the introduction of React Hooks (in 2018) we can use React.useState( ). It takes an initial value when it renders, which can also take the value of when the value is set/changed.
I hope this clarifies a little more about the intricacies of React! I've collated some great free resources in the list below:
Glitch: React Starter Kit - A free, 5-part video course with interactive code examples that will help you learn React.
Codecademy: React 101 - Codecademy’s introductory course for React.
Egghead.io: Start Learning React - This series will explore the basic fundamentals of React to get you started.
React Crash Course 2018 - A beginner-friendly crash course through the most important React topics.
Egghead.io: The Beginner’s Guide to ReactJS - Free course for React newbies and those looking to get a better understanding of React fundamentals.
Free React Bootcamp - Recordings from three days of a free online React bootcamp.
Scrimba: Learn React for free - 48 hands-on video tutorials building react apps.
Top comments (0)