Permalink
Find file
a29936d Jan 15, 2017
540 lines (418 sloc) 24.6 KB

+++ title = "The Road to learn React" description = "The Road to learn React offers you a foundation before you start to dive into the advanced React JS ecosystem. It covers React by building an example Hacker News application. It's a huge tutorial..." date = "2017-01-10T13:50:46+02:00" tags = ["learn", "react"] categories = ["React"] keyword = "learn react" news_keywords = ["learn react"] contribute = "the-road-to-learn-react.md" banner = "img/posts/the-road-to-learn-react/cover.png"

summary = "The Road to learn React offers you a foundation before you start to dive into the more advanced React ecosystem. It has less tooling and less external state management, but more React. It explains general concepts and patterns." +++

{{% header "The Road to learn React [eBook]" %}}

I love to teach, even though I am no expert. I learn every day and I have the fortune to have great mentors at my company. After all not everyone has the opportunity to learn from mentors and peers. The book is my attempt to give something back which might help people to get started and advance in React.

The following article includes preview chapters of an eBook to learn React. In the future it highly depends on your feedback and contribution. I try my best to teach in the best way possible, but I can only improve with your help. I am keen to hear your honest thoughts on {{% a_blank "Twitter" "https://twitter.com/rwieruch" %}}.

But why me? In the past I have written a large tutorial to implement a SoundCloud Client in React + Redux. I never expected the overwhelming reaction. I learned a lot during the process of writing. But even more by getting your feedback. It was my first attempt to teach people in programming.

It also taught me to do better. I realized the SoundCloud tutorial is suited for advanced developers. It uses several tools to bootstrap your application and dives quickly into Redux. Still it helped a lot of people to get started. In my opinion it is a great tutorial to get a bigger picture of React + Redux. I use every free minute to improve the material, but it is time consuming.

In the Road to learn React I want to offer a foundation before you start to dive into the broader React ecosystem. It has less tooling and less external state management, but more React. It explains general concepts, patterns and best practices. You will learn to build your own Hacker News application. It cover real world features like pagination, client-side caching and interactions. Additionally you will transition from JavaScript ES5 to JavaScript ES6. After all the book should give you a solid foundation in React before you dive into more advanced topics like Redux.

{{% package_box "The Road to learn React" "Build a Hacker News App along the way. No setup configuration. No tooling. No Redux. Plain React in 140+ pages of learning material. Pay as you want like 3000+ readers." "Get the Book" "img/page/cover.png" "http://eepurl.com/caLPjr" %}}

{{% chapter_header "FAQ" "faq" %}}

How do I get updates? You can {{% a_blank "subscribe" "http://eepurl.com/caLPjr" %}} or follow me on {{% a_blank "Twitter" "https://twitter.com/rwieruch" %}} to get updates. It keeps me motivated to do my work. Once you have a copy of the book, it will stay updated. But you have to download the copy again once its updated. I will notify everyone via the {{% a_blank "Newsletter" "http://eepurl.com/caLPjr" %}} and {{% a_blank "Twitter" "https://twitter.com/rwieruch" %}}.

Does it cover Redux? It doesn't. The book should give you a solid foundation before you dive into advanced topics like Redux. Still the implementation in the book will show you that you don't need Redux to build an application.

Why is the book pay what you want? I have put a lot of effort into this and will do so in the future. My desire is to reach as many people as possible. Everyone should be enabled to learn React. When you come from my website to Get The Book, you will get a coupon url which allows you to pay what you want. Still you could pay - if you can afford it - because it already took me a lot of my time to write and improve the book.

Does the article cover all book chapters? No. The book improves all the time. But it is tough to keep it in sync with the article. The article only covers preview chapters. These preview chapters are not up to date. Simply grab the book to get all the material! It has over 140 pages of learning material. It will stay updated.

Does the article stay updated? Not really. I try to keep it updated, but I am working continuously on the book. It's hard to keep both in sync. Grab the book instead! What you see in the article is only a preview and not updated on a regular basis.

Will you add more chapters in the future? It depends on the community. If there is an acceptance for the book, I will deliver more chapters and improve old material. I will keep the content up to date with recent best practices, concepts and patterns. But it has to pay me a bit of my effort. I would love to hear your thoughts about possible chapters to improve and enrich the learning experience.

{{% chapter_header "Changelog" "changelog" %}}

10. January 2017:

{{% chapter_header "What you can expect (so far...)" "expectNow" %}}

  • Hacker News App in React
  • no complicated configurations
  • create-react-app to bootstrap your application
  • efficient lightweight code
  • only React setState as state management (so far...)
  • transition from JavaScript ES5 to ES6 along the way
  • the React API with setState and lifecycle methods
  • interaction with a real world API (Hacker News)
  • advanced user interactions
    • client-sided sorting
    • client-sided filtering
    • server-sided searching
  • implementation of client-side caching
  • higher order functions and higher order components
  • snapshot test components with Jest
  • unit test components with Enzyme
  • neat libraries along the way
  • exercises and more readings along the way
  • internalize and reinforce your learnings
  • deploy your app to production
{{% pin_it_image "learn React infographic" "img/posts/the-road-to-learn-react/infographic.png" %}}

{{% chapter_header "What you could expect (in the future...)" "expectLater" %}}

  • advanced components and interactions to build a powerful dashboard
  • give your app a structure in terms of files/folders
  • arrive at the point to experience how state management could help you
  • introduce a state management library to your app
  • use common patterns in React and state management
  • get to know open source style guides for a better code style
  • more neat libraries along the way
  • usage of React dev tools and performance profiling
  • get to know a diverse set of styling tools in React
  • animate your components

{{% chapter_header "How to read it?" "howToRead" %}}

In general each chapter will build up on the previous. Each will dive into a new learning. Don't rush through the book. You should internalize each step. You can apply your own implementations and read more about the topic. Make yourself comfortable with the learnings before you continue.

After you have read the book you could dive into the SoundCloud Client in React + Redux. It guides you to implement your own SoundCloud application with Redux as state management library.

{{% chapter_header "Table of Contents" "toc" %}}

  • Bootstrap your React App
  • Basics in React
    • Internal Component State
    • ES6 Object Initializer
    • Unidirectional Data Flow
    • Interactions with Forms and Events
    • ES6 Destructuring
    • Controlled Components
    • Breakup Your Components
    • Composable Components
    • Reusable Components
    • Component Declarations
    • Styling Components
  • Getting Real with an API
    • Lifecycle Methods
    • Fetch Data from an API
    • ES6 spread operator
    • Conditional Rendering
    • Client- or Server-side Interaction: Search
    • Paginated Fetch
    • Client Cache
  • Advanced React Components
    • Snapshot Tests with Jest
    • Unit Tests with Enzyme
    • Loading ...
    • Higher Order Components
    • Advanced Sorting
    • Lift State
  • Deploy your App to Production

The content below is not up to date. Grab a copy of the book to get the full updated version.

{{% header "Bootstrap your React App" %}}

The chapter will give you an introduction to React. It clarifies why you should learn React in the first place. Once that's clarified you will bootstrap your first React app. Along the way you will get an introduction to JSX to be prepared for your first React components.

{{% chapter_header "Hi, my name is React." "introductionToReact" %}}

Why should you bother to learn React? In the recent years single page applications (SPA) got popular. Frameworks like Angular, Ember and Backbone helped JavaScript people to build modern web applications beyond jQuery. The list is not exhaustive. There exists a wide range of SPA frameworks. When you consider the release dates, most of them are among the first generation of SPAs: Angular 2010, Backbone 2010, Ember 2011.

The initial React release was 2013 by Facebook. React is no SPA framework but a view library. You can get easily started to render your first components in a browser. But the whole ecosystem around React makes it possible to build single page applications.

But why should you consider to use React over the first generation of SPA frameworks? While the first generation of SPAs tried to solve a lot of things at once, React only helps you to build your view layer. It's a library and not a whole framework. The idea behind it: Your view is a hierarchy of composable components.

In React you can focus on your view before you introduce more aspects to your application. Every other aspect is another building block for your SPA. These building blocks are essential.

First you can learn them step by step without worrying to understand everything at once. It's different in comparison to a framework which gives you every building block from the start.

Second all building blocks are interchangeable. It makes the ecosystem around React such an innovative place. Multiple solutions are competing with each other. You can pick the most appealing solution for you and your use case.

The first generation SPA frameworks arrived at an enterprise level. React stays innovative and gets adapted by multiple tech thought leader companies like {{% a_blank "Airbnb, Netflix and of course Facebook" "https://github.com/facebook/react/wiki/Sites-Using-React" %}}. React is probably one of the best choices for building UI nowadays. It has a good design, an amazing ecosystem and a great community. Everyone is keen to experience where it will lead us in 2017.

{{% chapter_header "Requirements" "requirements" %}}

Before you start to read the book, you should be quite familiar with HTML, CSS and JavaScript (ES5). Additionally you will need a working editor and terminal. Last but not least you will need an installation of {{% a_blank "node and npm" "https://nodejs.org/en/" %}}.

These are my versions of node and npm at the time of writing the book.

{{< highlight javascript >}} node --version *v5.0.0 npm --version *v3.3.6 {{< /highlight >}}

{{% chapter_header "create-react-app" "cra" %}}

You will use {{% a_blank "create-react-app" "https://github.com/facebookincubator/create-react-app" %}} to bootstrap your app. It's an opinionated but zero-configuration starter kit for React introduced by Facebook. People like and would {{% a_blank "recommend it to starters by 96%" "https://twitter.com/dan_abramov/status/806985854099062785" %}}. In create-react-app the tools evolve in the background while the focus is on the application implementation.

To get started you will have to install the package to your global packages on your command line. You should already have npm installed to install the package.

{{< highlight javascript >}} npm install -g create-react-app {{< /highlight >}}

Now you can bootstrap your first app and navigate into the directory:

{{< highlight javascript >}} create-react-app hackernews cd hackernews {{< /highlight >}}

When you open the app in your editor, you will find the following folder structure:

{{< highlight javascript >}} hackernews/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html src/ App.css App.js App.test.js index.css index.js logo.svg {{< /highlight >}}

In the beginning everything you need is located in the src folder. The main focus lies on the App.js file to implement React components. But there is also the App.test.js for tests and the index.js as entry point to the React world. We will get to know them in a later chapter.

Additionally create-react-app comes with the following npm scripts for your command line:

{{< highlight javascript >}} // Runs the app in http://localhost:3000 npm start

// Runs the tests npm test

// Builds the app for production npm run build {{< /highlight >}}

You can read more about {{% a_blank "the scripts and create-react-app" "https://github.com/facebookincubator/create-react-app" %}} in general.

Exercises:

  • npm start your app and visit the page in your browser
  • run the interactive npm test script
  • make yourself familiar with the folder structure

{{% chapter_header "Introduction to JSX" "jsx" %}}

Now you will get to know JSX. Let's dive into the source code provided by create-react-app. The only file you will touch in the beginning will be the src/App.js.

{{< highlight javascript >}} import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css';

class App extends Component { render() { return (

logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } }

export default App; {{< /highlight >}}

create-react-app already scaffolded a boilerplate application. In the file you have an ES6 class component with the name App. Basically you can use the <App /> component everywhere in your application now. Once you use it, it will produce an instance of your component. The elements it returns are specified in the render() function.

Pretty soon you will see where the App component is used. Otherwise you wouldn't see the rendered output in the browser, would you?

The content in the render block looks pretty similar to HTML, but it's JSX. JSX allows you to mix HTML and JavaScript. It's powerful yet confusing in the beginning when you are used to plain HTML. That's why a good starting point is to use basic HTML in your JSX. Next you can start to embed JavaScript expressions in between by using curly braces.

Try it. Define a property and use it in JSX.

{{< highlight javascript "hl_lines=7 12" >}} import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css';

class App extends Component { render() { const helloWorld = 'Welcome to React'; return (

logo

{helloWorld}

To get started, edit src/App.js and save to reload.

); } }

export default App; {{< /highlight >}}

Additionally you might have noticed the className attribute. Because of technical reasons JSX had to replace HTML attributes like class (className) and for (htmlFor).

ES6 Sugar:

In ES5 you declare variables with var. In ES6 there are two more variable declarations: const and let.

Exercises:

{{% chapter_header "ReactDOM.render" "reactDomRender" %}}

Before you continue with the App component, you might want to see where it's used. It's located in your entry point to the React world src/index.js.

{{< highlight javascript >}} import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css';

ReactDOM.render( , document.getElementById('root') ); {{< /highlight >}}

Basically ReactDOM.render uses a DOM node in your html to replace it with your React components. That's how you can easily integrate React in every app.

ReactDOM.render expects two arguments.

The first argument is JSX. It already takes your App component, but you don't need to pass a component. It would be sufficient to use <div>Hello React World</div>. After all the first argument is the content to be rendered.

The second argument specifies the place where the React application hooks into your HTML. It expects an element with an id="root". Open your public/index.html file to find the id.

Exercises:

{{% chapter_header "Map in JSX" "mapJsx" %}}

Let's get back to your App component. So far your rendered some random properties in your JSX. Now you will start to render a list of items. The list will be some mock data in the beginning, but later you will fetch the data from an external API. That will be far more exciting.

Since you can use JavaScript in JSX, it's possible to map over your data to display each item.

{{< highlight javascript "hl_lines=4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 28 29 30 31 32 33 34 35 36 37" >}} import React, { Component } from 'react'; import './App.css';

const list = [ { title: 'React', url: 'https://facebook.github.io/react/', author: 'Jordan Walke', num_comments: 3, points: 4, objectID: 0, }, { title: 'Redux', url: 'https://github.com/reactjs/redux', author: 'Dan Abramov, Andrew Clark', num_comments: 2, points: 5, objectID: 1, }, ];

class App extends Component {

render() { return (

{ list.map(function(item) { return (
{item.title} {item.author} {item.num_comments} {item.points}
); })}
); } }

export default App; {{< /highlight >}}

Additionally you have to assign a key property to each list element. Only that way React is able to identify added, changed and removed items.

{{< highlight javascript "hl_lines=3" >}} { list.map(function(item) { return (

{item.title} {item.author} {item.num_comments} {item.points}
); })} {{< /highlight >}}

Give your elements a stable id. Don't make the mistake to use the array key which isn't stable. React will have a hard time to identify the items properly when the order of them changes.

{{< highlight javascript "hl_lines=2 4" >}} // bad example { list.map(function(item, key) { return (

...
); })} {{< /highlight >}}

Now when you open your app in a browser both list items should get rendered and be visible.

ES6 Sugar:

Let's have a look again at the map function. It takes a function itself, which you can write more concise in ES6.

First you can use the arrow function.

{{< highlight javascript "hl_lines=1" >}} { list.map((item) => { return (

{item.title} {item.author} {item.num_comments} {item.points}
); })} {{< /highlight >}}

Second you can remove the block body and thus remove the return statement. In a concise body an implicit return is attached.

{{< highlight javascript "hl_lines=1 8" >}} { list.map((item) =>

{item.title} {item.author} {item.num_comments} {item.points}
)} {{< /highlight >}}

Now your JSX looks more readable again.

Exercises:


Your src/App.js should look like the following by now:

{{< highlight javascript >}} import React, { Component } from 'react'; import './App.css';

const list = [ { title: 'React', url: 'https://facebook.github.io/react/', author: 'Jordan Walke', num_comments: 3, points: 4, objectID: 0, }, { title: 'Redux', url: 'https://github.com/reactjs/redux', author: 'Dan Abramov, Andrew Clark', num_comments: 2, points: 5, objectID: 1, }, ];

class App extends Component { render() { return (

{ list.map((item) =>
{item.title} {item.author} {item.num_comments} {item.points}
)}
); } }

export default App; {{< /highlight >}}

You have learned to bootstrap your own React app! Let's recap the last chapters:

  • React
    • create-react-app bootstraps a React app
    • JSX mixes up HTML and JavaScript to express React components
    • ReactDOM.render() is an entry point for a React app
    • built-in JavaScript functionalities like map can be used to render a list of items
  • ES6
    • more variable declarations with const and let
    • arrow functions with block and concise bodies to shorten your function declarations

It makes sense to make a break at this point. Internalize the learnings and apply them on your own. You can experiment with the source code you have written so far.


That's the last chapter of the book preview. You can read more chapters on Leanpub! Grab it and pay as you want. I want to enable everyone to learn React. You can have a look again at the Table of Contents to see what you can expect to find on Leanpub.

{{% read_more "The SoundCloud Client in React + Redux" "http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/" %}}

I would really appreciate your support on social media to reach as many people as possible to grab a version of the book.