Disclaimer: I'm writing these posts in multiple parts just so that it's better separated and so my conscience can bother me that I have to actually continue blogging.

Disclaimer 2: I will be using ES6+ syntax in the code I write because it's easier to read and it's a modern-day standard (it's also my personal preference to not use semicolons, sorry about that). If you aren't accustomed with ES6 I provide a link further down the post where you can find lots of resources to help you learn.

Disclaimer 3: All of the libraries I use in the code provided are available via NPM. I will not cover how NPM works in these series, so you should already have basic knowledge.

An introduction

React seems to be ever gaining in popularity. Despite all the new JS frameworks that are popping up, you keep reading about React and Redux on every developer website, blog, seminar. So you decide to check it out and see what the fuss is about. Or, if you're me, you came from a background of AngularJS/Angular 4 into your first actual job and on a React-based project. So you open up YouTube/Pluralsight/some other website with courses and tutorials to dive into the world of React. But 10 minutes into the first video and you've heard about actions, reducers, a store, components, state, higher-order components etc, and you're sitting there wondering "Am I just stupid or is this just overly complicated?".

The answer, it's complicated. At first sight.

It's complicated because it's different. Chances are, you've never seen anything like it, especially if you, like me, come with Angular experience. The structure in Angular is based on controllers (AngularJS)/components (Angular 2/4) and services. It resembles a back-end organizational structure, and it feels familiar to back-end developers (especially if you've ever worked with Spring, like I have). And it should make sense, since Angular 2 was targeting enterprise development.

Before I begin, I want to let you know that I didn't learn, or should I say, am not learning React simply because I want to, but because I had to. I started my first job 3 months ago, while still in university, where I was put on a React-based project. My only previous experience in front-end JavaScript development was AngularJS, and (more recently) Angular 2/4. I had to catch up with ES6+ first since I was using TypeScript, so if you haven't done that, I recommend to check out this link first. Anyways, I am writing these series as I am still evolving, in hopes that a beginner's opinion might help out other beginners who are just as lost as I was.

I did forget to mention that, even though I was kind of forced in learning React, I'm loving it more and more each day!

A couple of more notes and we will dive right into React (I promise!):

1. You will have to adapt to a different project structure. This is simply because React/Redux's core concepts do not exist anywhere else.
2. Don't get frustrated when you have to edit/create a lot of files for a single feature. This may be painful at the beginning, but it will save you time (and headaches) later, especially when debugging, trust me.
3. It takes time to adjust your mindset to React and Redux's workflow. As I mentioned before, React/Redux's concepts are different. Therefore, it will take you time before you'll be able to naturally think in terms of actions and reducers. It took me a month before I was confident enough to write a new component.
4. Doing an actual project outside of work using React/Redux helped me dramatically. It's different when you work on an already built project and when you have to build one on your own from scratch. Doing it from scratch helps you understand the concepts more thoroughly.

Diving into React (what is it, how does it work, what are components)

Going through the tutorial, I will use a question-answer based structure, by answering the questions I had when I first started learning React.

Okay, now that we got out of the way, we can start. So, first question, what is React?

React, on itself, is simply a JavaScript library for building UI components who can retain state.

-Sounds cool. What are components though?
Components are simply elements that you can render on the UI. They're built of base HTML tags and other React components. React splits the UI into multiple components so that you can, 1. reuse them and, 2. so that you can isolate each component's logic.

-Okay, I understand what components are. What does 'retain state' mean?
Retaining state simply means that React components can keep the state of the elements they contain, such as the current value of an input field. Angular accomplishes this using two-way data binding. In React, however, in the context of a single component, everything is stored in its state. An update to an input field should trigger an update in the state, which will re-render the component and update the input field with the new value from the state.

-Hmm, but isn't that kinda stupid? All those re-renders surely must have a performance impact?
No, because of React's Virtual DOM. I will not dive into how the virtual DOM works in these series, but the link I provided contains a really good description of it. You can check out performance benchmarks for multiple JS frameworks/libraries here. You can find links to benchmark results in the README.

-Okay, I get it, virtual DOM is pretty fast. Is there anything else I should know?
As a matter of fact, there is. I should probably tell you what JSX is, since you will use it to write your components. JSX is a preprocessor step that allows you to use XML-like syntax to write your components' look/structure, instead of using methods provided by React. For a more detailed guide on JSX and to see the difference of using and not using it, check this out.

-JSX looks a lot more readable than actually using React.createElement, sweet! How do I write my first component?
There's multiple ways you can write a React component. The most up-to-date way, however, is to use an ES6 class that extends the React.Component class, and that has a render() method. Like so:

//MyComponent.jsx
import React from 'react'

export default class MyComponent extends React.Component {
  render() {
    return <h1>Hello from my first component!</h1>
  }
}

And that's it! We just created a simple React component that renders a h1 heading. Notice that <h1></h1> tag? That's JSX at work. The JSX preprocessor will compile that into React's createElement method. You can see the differences in the link on JSX that I added earlier in this blog.

-Wow, awesome! But, wait, I'm confused, how do I render this component? Or better yet, how do I start my app at all?
We're getting there. In order to render your component and start your application you need a starting point for your application, like an index.js file. But in order to run ES6+ you'll need Babel etc. I'm getting headaches just by writing about all these configurations and boilerplate code. Luckily, there's a tool which will generate all of this for you. Cue create-react-app. For simplicity reasons, I will assume we have the application set up with create-react-app (it has a pretty great documentation), which should generate these files in the src directory:

App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js

index.js is the starting point in our application. It replaces the element with id="root" in our index.html file with the compiled App component, which currently renders an autogenerated UI. The ReactDOM.render() method can have one and only one parent tag, which is why we will render all of our components (and routes, in the future) in the App component. First of all, add your MyComponent.jsx file in the same directory as the above mentioned files. Then, open App.js and modify it in the following way:

import React, { Component } from 'react'
import MyComponent from './MyComponent'
import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyComponent />
      </div>
    )
  }
}

export default App

What we do here is import our exported class from MyComponent, and then add it as a child of the main div tag.

This will render our MyComponent component as part of the App component, instead of the previous generated content. React components can have other React components as children which, in turn, can have other React components as children etc. There is no limit to how you structure your components, which means you can reuse your components anywhere you'd like, and that's what makes React great.

We want to have a single component which renders the others because, as I mentioned, the render method we use in index.js can only have one parent tag.

Part 1 conclusion

I think that should be enough, for starters. I believe I covered most of the questions that beginners start to ask when first diving into React, and then gave a simple example of how a component looks like.

Wait, but I didn't see anything of the component state you talked about earlier!

That's exactly what we will do in part 2. We will cover component state in React and passing props to children. Please, I'm just starting out writing blogs, so if you have any suggestions for me, let me know in the comments section, it will be much appreciated. And stay tuned for part 2!