Are you an impatient student like me? This is the React tutorial for you.
Disclaimer: This was made with the combined knowledge I acquired from many tutorials, articles and videos. Not all the images I use are of my autorship.
I’m writing this because of two reasons:
- The first is to ensure I know React so well that I can write a tutorial.
- I consider most tutorials to be very slow and I like going fast and straight to action, so here you will see little text just to know what is going on. Because of this I will mention some features I won't cover because I consider them unnecesary.
I assume you already know basic HTML and CSS, and have a good knowledge of Javascript. If you don't, I recommend you study and learn those first because you will not understand this fast tutorial.
- codepen.io: Codepen allows you to write HTML, CSS and Javascript while seeing the results. Here is the link for a React.js template I made, just fork it and work on your own while reading this tutorial C:
- React CDN: You can use React through it's CDN.
React.js is an Open Source library developed by Facebook Developers, for building User Interfaces (UI). React makes user interfaces very easy to build by cutting each page into pieces. We call these pieces components.
React is fairly easy to understand and at this moment has an excellent reputation and a great community. It supports ES6 and can perform client-side as well as server-side rendering.
Note: Represents View in Model-View-Controller architectural pattern, that means you will need more tools in the future to cover the Model and Controller part.
Consider a page displaying a list containing 10 items and one is getting updated. DOM will rebuild the entire list making it work 10 times more than what is necessary.
Virtual DOM is an abstract, lightweight copy of DOM. It can be changed as and when we want and then can be saved to the real DOM. Whenever a change occurs, Virtual DOM efficiently rerenders the DOM. It is much faster than DOM. It has the same properties as a real DOM object.
React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript (but JSX is NOT HTML). It is not necessary to use it but I recommend it as it makes your code more readable.
However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process.
Self-enclosing tags: An important way in which JSX differs from HTML is the idea of self-enclosing tags.
Note: You can use Javascript inside HTML (JSX) writing {code} (example in second picture). If you don't understand the code above please don't panic and come back in a few minutes.
A typical ReactJS program constitutes:
- Components.
- Elements will not be covered here.
- Props.
- State.
- Lifecycle.
Javascript function/class that represents a piece of a webpage. To build a page, we call these functions/classes in a certain order, put the result together, and show it to the user.
If we call the OurFirstComponent() function we’ll get back a bit of JSX. We can use something called ReactDOM.render(Component,locationForComponent) to put it on the page.
The main difference between Function or Class is that Classes have more features, like state, lifecycle, handling events, etc. You will learn about them soon.
Inputs accepted by components.
State is similar to props, but it is private and fully controlled by the component. You have to add a constructor to the class in order to initialize the state.
You can see an excelent example of lifecycle in this pen (you should be able to understand it).
- componentDidMount(): When the component is rendered on the website this method is triggered. In the example it creates a setInterval for tick(). Great place to initiate network requests. Keep in mind that using setState() in componentDidMount() will cause a re-render of the component, affecting performance.
- componentWillUnmount(): If for some reason the component is removed from the DOM, this method will be triggered. In the example clears the interval created by componentDidMount().
- shouldComponentUpdate(): Invoked whenever new props or state is being received by the component. If you consider that props/state don't need to update the component you should return false. Otherwise, true.
- componentDidUpdate(): It allows you to interact with the DOM when the component has been updated.
- static getDerivedStateFromProps(): His only purpose is to enable a component to update its state depending of changes in his props.
- getSnapshotBeforeUpdate(): Called just before the most newly rendered output is attached to the DOM. It returns a snapshot value or null and this returned value is always passed as a parameter to componentDidUpdate().
Legacy lifecycle methods: Here are old methods that even the official documentation of React encourages not to use.
- UNSAFE_componentWillMount(): Called before the component is being mounted. If you need to set the initial state of a component, use constructor() instead. If you plan to use any functions that create any side effects or subscriptions, use componentDidMount() instead.
- UNSAFE_componentWillReceiveProps(): It creates bugs and inconsistencies. If you need to fetch data or create an animation, you should rather use componentDidMount().
- UNSAFE_componentWillUpdate(): Unless shouldComponentUpdate() returns false, this method is being triggered when new props or state are being received. You can use UNSAFE_componentWillUpdate() to execute preparation before an update. Do not use this.setState()inside it. Use componentDidMount() instead.
Hooks let you use state and other React features without writing classes. It is a really new addition.
Hooks are difficult for some people to understand, so you should not worry about them for now. I suggest you try to understand them in the future, when you have more experience with React.
-
It is consider a bad practice to change a Parents state from Child. Try to think how to manage Parents and Childs before programming, it will save you a lot of time.
- However, you can do this by binding a Parent function to the Child.
-
Keep in mind you can style components in four ways:
- You can give JSX a className (you can't use "class" because it is not HTML, it's JSX) to select it from CSS: This is the way everyone styles components when learning React. However, one issue that will arise you begin adding more components lies in the naming of your components a all style rules declared are globally scoped. This is a problem where, for example, you had two elements with the same name, created by either you or your teammate.
- Inline styling: One thing to take into consideration is that it is an object, so that means no dashes (e.g. font-weight) as in regular CSS. The style properties are written using camelCase. So font-weight will be fontWeight and so on. Conditional styling is also possible here. CONS: With this method, pseudo selectors like :hover as well as media queries can be used when there are only like 2 or 3 properties that doesn’t require the use of media queries or pseudo selectors, and/or in situations where there will be a need for conditional styling.
- CSS Modules: CSS Modules are very similar to writing CSS in external stylesheets (as in the first method). The only difference is that the styles are locally scoped unlike with traditional external stylesheets. This means that style rules won’t clash together or overwrite each other. You basically use the same methods as you would normally use when styling components using traditional CSS. It also allows you to use all the nice methodolgies like BEM. You can read more about it here: CSS Modules.
- Styled components: This is considered a bad practice, you shouldn't mix Javascript with CSS.
If you are here it means there are some concepts you probably don't know. I don't want you to waste time searching them, so here they are.
- Elements: An element describes what you want to see on the screen. Unlike browser DOM elements, React elements are plain objects, and are cheap to create. In the official documentation they talk more about them, but I consider it is a waste of time because you will be using Class Components most of the time.
-
CDN (Content Delivery Network): Geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon. A properly configured CDN may also help protect websites against some common malicious attacks, such as Distributed Denial of Service (DDOS) attacks.
-
ECMAScript6: ECMA (European Computer Manufacturers Association) is an organization dedicated to define the standard for Javascript. ES6 is the latest update of it, which includes a lot of improvements like "let" and "const" variable, arrow functions, spread operator, etc. I recommend you investigate it well because it adds a lot of extra functionality to Javascript.
-
Client-side/Server-side rendering: This means who is going to be in charge of the rendering of the webpage. Thanks to the variety of Frontend Frameworks we usually do client-side rendering (everything is handled by your web browser). This doesn't mean we don't use Server-side anymore (in this case the server had to do everything, often slowing things down).
-
DOM (Document Object Model): It defines the logical structure of documents (HTML) and the way a document is accessed and manipulated. With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content.
-
Transpiler: Tool that reads code written in one programming language to produce equivalent code in another.