It's Not Enough To Learn React To Use React

It's Not Enough To Learn React To Use React

Recently, I’ve been asked:

Art, how easy it is to learn React?

It depends.

Depends on 1) what you already know, 2) how quickly you can understand new concepts and 3) how much work are you willing to put in.

If you’re familiar with JavaScript ES5, you understand DOM and you have built a couple of single web page applications in your career, then learning React will be easy for you.

What catches most React learners by surprise is that it’s not enough to learn React to use React in real life projects.

You might not want to hear this ??, but the truth is - React is only a single tool for a single problem that is part of the bigger problem that teams of front end developers solve every day.

What exactly is the problem that React solves on its own?

Explaining to a web browser what to render on the screen in a declarative way without using DOM API directly. To put it simply.

So a good follow up question would be:

Art, what else should I learn today to use React in real life projects?

First of all you need to learn JavaScript ES6 (also know as ES2015). The future is here, so you might want to cover ES7, ES8 and ES.Next proposals as well to get really comfortable with writing future-proof JavaScript.

Next, you will need to learn Babel, because modern web browsers don’t understand all features of ES6, ES7, ES8 and ES.Next versions of JavaScript syntax.

Next, you will need to learn React 16.

Now you would like to learn how to test your React code. For that you will learn Jest and Enzyme.

Cool, now you would like to learn how to manage your application's state. Managing your application’s state is not React’s job you know. For that you will learn Redux.

Ok, now you would like to learn how to test your Redux code. Get to know Jest better.

Next, you would like to learn how your React app can talk to back end REST API. For that you will learn redux-thunk and axios libraries. You might as well need to understand RxJS and redux-observable.

The follow up question is: how do you test all that? By digging deeper into Jest and learning sinon and chai.

At this point you have the core understanding of how to build a fully-functional web application with React, right?

Nope. ??

There’re other “hard” problems that you will have to deal with: routing and form validation.

If you’re building a single web page application - you will need to understand how routing works and how to implement it in your React app. For that you will learn react-router library.

There’s a really good chance that your web application will have forms that need validation. In Redux world, we have Redux Form library (can be painful to use) that you will need to learn.

Can you start building a real-life React app now?

Not quite yet.

Let’s talk about setting up your React project first. You will need to learn how to use npm and/or yarn, create-react-app and Webpack. npm or yarn for managing dependencies and running scripts, create-react-app for scaffolding a fully configured React project and Webpack for configuring how your project should be bundled together.

Fine.

Can we start writing React code now? ??

Yes, ?? but... ask yourself this - what’s the right editor for you? Today, Visual Studio Code (VSCode) is a winner - you will need to learn how to use it. Other good options: Atom and Sublime - though not as good as VSCode. ??

You want to write React code that is easy to read, right? I thought so. You will need to learn Prettier.

And you also want to write React code that is bug-free? That’s nearly impossible ??, but there’s a way to improve your chances ??: learn TypeScript and use it instead of JavaScript. That way you will enforce static typing that will prevent you from introducing type-related bugs in your React app.

Now that you write TypeScript, you might want to lint your code. Learn TSLint.

Are we there yet? ??

We’re getting closer. ??

Now that you’re writing your React code using TypeScript syntax in Visual Studio Code editor and running it in Chrome browser - you need a way to debug it. For that you will need to learn how to use Chrome DevToolsReact Developer Tools and Redux DevTools.

Done with that?

Now you’re ready to use React in a real world project and command a higher salary! ??

Let’s summarise.

To learn React today - practically means to learn:

  • ES6, ES7, ES8, ES.Next
  • Babel
  • React 16
  • Jest
  • Enzyme
  • Redux
  • redux-thunk
  • axios
  • RxJS
  • redux-observable
  • sinon
  • chai
  • react-router
  • Redux Form
  • npm or yarn
  • create-react-app
  • Webpack
  • Visual Studio Code
  • Prettier
  • TypeScript
  • TSLint
  • Chrome DevTools
  • React Developer Tools
  • Redux DevTools

The good news is that “to learn” means to understand the core concepts and get familiar with the fundamental functionality of each item in that list and get practical with the parts that are useful for your project. You don’t need to get familiar with 100% of functionality of every library and tool from the list. Just like with a microwave - you don’t use 100% of it’s functionality.

The other good news is: this list is not a must-know list or the minimum requirements list. This is a list of things you might need to know to work on a real life project that uses React at it’s core. Different projects and different teams use different tools, but solve similar problems.

I personally think that learning React is easier than learning let's say Redux or RxJS or Webpack for example.

Next time you see a job description for a Front End Developer with React experience role - expect more or less this list. Today React became an umbrella term for all other “hidden” requirements in a typical front end job description.

React is a lead singer, but there’s much more music production going on behind the scenes.

I would like to hear your thoughts: knowing what you already know - how easy it would be to learn React for you today?

???? Michael Antczak

Moving to the forefront of AI automation.

7 å¹´

Great. Pretty much covers it all. I would still mention react native though...

Kingsley Okyere

Co-Founder @ Mixtape Madness

7 å¹´

Great post! one thing I found useful when learning React, was understanding the Flux pattern as well.

Nick Gorbikoff ???? ?? ??

Hands-on CTO (Ruby, React, Elm, Elixir, Crystal, Trailblazer Framework)

7 å¹´

Ummm, or one can just learn Elm ... :) Good article thou!

Carlos Martinez

Senior Software Engineer @ The New York Times | AWS,GCP,GKE Kubernetes

7 å¹´

Was this meant to scare me off? Because it didn't work! Just kidding , thanks for taking the time to write this up. Do you have any tips for getting into Jest testing?

Solid and comprehensive developer roadmap. Good work!

要查看或添加评论,请登录

Artemij Fedosejev的更多文章

  • Two Critical Skills I Would Pay And Would Like To Be Paid For

    Two Critical Skills I Would Pay And Would Like To Be Paid For

    I would pay and would like to be paid for two critical skills: Decision-making Communication Decision-making is tough…

  • Code Is Communication

    Code Is Communication

    Humans use verbal and non-verbal communication. And so does your code.

  • Fun-Driven Development

    Fun-Driven Development

    The Story A friend of mine with a health problem went to a doctor. The doctor concluded that a surgery is needed to…

    5 条评论
  • What Did We Learn From The First Episode of Planet Of The Apps

    What Did We Learn From The First Episode of Planet Of The Apps

    If you haven't heard about Planet Of The Apps, then here what you need to know: it's a TV show from Apple where Shark…

  • Don't Build an App Or a Website - Build Trust

    Don't Build an App Or a Website - Build Trust

    Yesterday I went to a great event in London called Co-Founder Speed Dating & Pitching. The underlying idea is to "speed…

    3 条评论
  • Who Wants To Start A Startup Incubator?

    Who Wants To Start A Startup Incubator?

    If I would start a startup incubator today - it would focus on only one thing: traction. I would call it "Traction…

    10 条评论
  • Your Customers Want To Feel Important

    Your Customers Want To Feel Important

    You might have heard the recent story about Uber CEO Travis Kalanick arguing with an Uber driver. I think it's an…

  • Where do you suggest to look for problems to solve to learn front end development?

    Where do you suggest to look for problems to solve to learn front end development?

    In my previous post I've suggested that you should try to solve problems that will give you a sense of whether you're…

    1 条评论
  • Do You Really Want To Be A Front End Developer?

    Do You Really Want To Be A Front End Developer?

    If you want to become a front end developer and you haven’t written any code before in your life then please read this…

    10 条评论
  • Don't Build a Website To Solve a Business Problem That You Don't Have

    Don't Build a Website To Solve a Business Problem That You Don't Have

    If you're a tech entrepreneur who wants to build a website or an app, then pause for a second. You need to know this…

    4 条评论

社区洞察

其他会员也浏览了