Świat Artura

What I do?

This blog is documenting my learning how to code and create websites. I concentrate on FreeCodeCamp.org solutions, but also try to give some tips in other areas.

Recent Posts

Here are my last articles, mostly regarding REACT, but also but there is more…

Background removers

I came across little mission during my Upwork adventures – remove background from the image. It can be done with GIMP or any other image editor, but it’s pretty laborious process. Lucky for lazy web developing freelancers there are online services which provide automatic image manipulation for free.I decided to do little comparison between them.… Continue reading Background removers

freeCodeCamp.org React: Use a Ternary Expression for Conditional Rendering 41/47

Objective: Before moving on to dynamic rendering techniques, there’s one last way to use built-in JavaScript conditionals to render what you want: the ternary operator. The ternary operator is often utilized as a shortcut for if/else statements in JavaScript. They’re not quite as robust as traditional if/else statements, but they are very popular among React… Continue reading freeCodeCamp.org React: Use a Ternary Expression for Conditional Rendering 41/47

freeCodeCamp.org React: Use && for a More Concise Conditional 40/49

Objective: The if/else statements worked in the last challenge, but there’s a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of else if statements to return slightly… Continue reading freeCodeCamp.org React: Use && for a More Concise Conditional 40/49

freeCodeCamp.org React: Render with an If-Else Condition 39/47

Objective: Another application of using JavaScript to control your rendered view is to tie the elements that are rendered to a condition. When the condition is true, one view renders. When it’s false, it’s a different view. You can do this with a standard if/else statement in the render() method of a React component. MyComponent… Continue reading freeCodeCamp.org React: Render with an If-Else Condition 39/47

freeCodeCamp.org React: Use Advanced JavaScript in React Render Method 38/47

Objective: In previous challenges, you learned how to inject JavaScript code into JSX code using curly braces, { }, for tasks like accessing props, passing props, accessing state, inserting comments into your code, and most recently, styling your components. These are all common use cases to put JavaScript in JSX, but they aren’t the only… Continue reading freeCodeCamp.org React: Use Advanced JavaScript in React Render Method 38/47

freeCodeCamp.org React: Add Inline Styles in React 37/47

Objective: You may have noticed in the last challenge that there were several other syntax differences from HTML inline styles in addition to the style attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with fontSize… Continue reading freeCodeCamp.org React: Add Inline Styles in React 37/47

freeCodeCamp.org React: Optimize Re-Renders with shouldComponentUpdate 35/47

Objective: So far, if any component receives new state or new props, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new state or props, and declare specifically if the components should update or not. The method is shouldComponentUpdate(), and… Continue reading freeCodeCamp.org React: Optimize Re-Renders with shouldComponentUpdate 35/47

freeCodeCamp.org React: Add Event Listeners 34/47

Objective: The componentDidMount() method is also the best place to attach any event listeners you need to add for specific functionality. React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user’s browser – even if… Continue reading freeCodeCamp.org React: Add Event Listeners 34/47

freeCodeCamp.org React: Use the Lifecycle Method componentDidMount 33/47

Objective: Most web developers, at some point, need to call an API endpoint to retrieve data. If you’re working with React, it’s important to know where to perform this action.The best practice with React is to place API calls or any calls to your server in the lifecycle method componentDidMount(). This method is called after… Continue reading freeCodeCamp.org React: Use the Lifecycle Method componentDidMount 33/47

freeCodeCamp.org React: Use the Lifecycle Method componentWillMount 32/47

Objective: React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props,… Continue reading freeCodeCamp.org React: Use the Lifecycle Method componentWillMount 32/47

freeCodeCamp.org React: Pass State as Props to Child Components 30/47

Objective: You saw a lot of examples that passed props to child JSX elements and child React components in previous challenges. You may be wondering where those props come from. A common pattern is to have a stateful component containing the state important to your app, that then renders child components. You want these components… Continue reading freeCodeCamp.org React: Pass State as Props to Child Components 30/47

freeCodeCamp.org React: Create a Controlled Form 29/47

Objective: The last challenge showed that React can control the internal state for certain elements like input and textarea, which makes them controlled components. This applies to other form elements as well, including the regular HTML form element. The MyForm component is set up with an empty form with a submit handler. The submit handler… Continue reading freeCodeCamp.org React: Create a Controlled Form 29/47

freeCodeCamp.org React: Create a Controlled Input 28/47

Objective: Your application may have more complex interactions between state and the rendered UI. For example, form control elements for text input, such as input and textarea, maintain their own state in the DOM as the user types. With React, you can move this mutable state into a React component’s state. The user’s input becomes… Continue reading freeCodeCamp.org React: Create a Controlled Input 28/47

freeCodeCamp.org React: Write a Simple Counter 27/47

Objective: You can design a more complex stateful component by combining the concepts covered so far. These include initializing state, writing methods that set state, and assigning click handlers to trigger these methods. The Counter component keeps track of a count value in state. There are two buttons which call methods increment() and decrement(). Write… Continue reading freeCodeCamp.org React: Write a Simple Counter 27/47

freeCodeCamp.org React: Use State to Toggle an Element 26/47

Objective: Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous – this means React may batch multiple setState() calls into a single update. This means you can’t rely on the previous value of this.state or this.props when calculating the next value. So, you should not… Continue reading freeCodeCamp.org React: Use State to Toggle an Element 26/47

freeCodeCamp.org React: Set State with this.setState 24/47

Objective: The previous challenges covered component state and how to initialize state in the constructor. There is also a way to change the component’s state. React provides a method for updating component state called setState. You call the setState method within your component class like so: this.setState(), passing in an object with key-value pairs. The… Continue reading freeCodeCamp.org React: Set State with this.setState 24/47

freeCodeCamp.org React: Render State in the User Interface Another Way 23/47

Objective: There is another way to access state in a component. In the render() method, before the return statement, you can write JavaScript directly. For example, you could declare functions, access data from state or props, perform computations on this data, and so on. Then, you can assign any data to variables, which you have… Continue reading freeCodeCamp.org React: Render State in the User Interface Another Way 23/47

freeCodeCamp.org React: Review Using Props with Stateless Functional Components 20/47

Objective: Except for the last challenge, you’ve been passing props to stateless functional components. These components act like pure functions. They accept props as input and return the same view every time they are passed the same props. You may be wondering what state is, and the next challenge will cover it in more detail.… Continue reading freeCodeCamp.org React: Review Using Props with Stateless Functional Components 20/47

freeCodeCamp.org React: Access Props Using this.props 19/47

Objective: The last several challenges covered the basic ways to pass props to child components. But what if the child component that you’re passing a prop to is an ES6 class component, rather than a stateless functional component? The ES6 class component uses a slightly different convention to access props.Anytime you refer to a class… Continue reading freeCodeCamp.org React: Access Props Using this.props 19/47

freeCodeCamp.org React: Use PropTypes to Define the Props You Expect 18/47

Objective: React provides useful type-checking features to verify that components receive props of the correct type. For example, your application makes an API call to retrieve data that you expect to be in an array, which is then passed to a component as a prop. You can set propTypes on your component to require the… Continue reading freeCodeCamp.org React: Use PropTypes to Define the Props You Expect 18/47

freeCodeCamp.org React: Pass Props to a Stateless Functional Component 14/47

Objective: The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it’s time to look at another feature very common in React: props. In React, you can pass props, or properties, to child components. Say you have an App component which… Continue reading freeCodeCamp.org React: Pass Props to a Stateless Functional Component 14/47

freeCodeCamp.org React: Write a React Component from Scratch 13/47

Objective: Now that you’ve learned the basics of JSX and React components, it’s time to write a component on your own. React components are the core building blocks of React applications so it’s important to become very familiar with writing them. Remember, a typical React component is an ES6 class which extends React.Component. It has… Continue reading freeCodeCamp.org React: Write a React Component from Scratch 13/47

freeCodeCamp.org React: Render a Class Component to the DOM 12/47

Objective: You may remember using the ReactDOM API in an earlier challenge to render JSX elements to the DOM. The process for rendering React components will look very similar. The past few challenges focused on components and composition, so the rendering was done for you behind the scenes. However, none of the React code you… Continue reading freeCodeCamp.org React: Render a Class Component to the DOM 12/47

freeCodeCamp.org React: Compose React Components 11/47

Objective: As the challenges continue to use more complex compositions with React components and JSX, there is one important point to note. Rendering ES6 style class components within other components is no different than rendering the simple components you used in the last few challenges. You can render JSX elements, stateless functional components, and ES6… Continue reading freeCodeCamp.org React: Compose React Components 11/47

freeCodeCamp.org React: Use React to Render Nested Components 10/47

Objective: The last challenge showed a simple way to compose two components, but there are many different ways you can compose components with React.Component composition is one of React’s powerful features. When you work with React, it is important to start thinking about your user interface in terms of components like the App example in… Continue reading freeCodeCamp.org React: Use React to Render Nested Components 10/47

freeCodeCamp.org React: Create a Component with Composition 9/47

Objective: Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a Navbar, Dashboard, and Footer.To compose these components together, you could create an App parent component which renders each of these three components as children. To render a component as… Continue reading freeCodeCamp.org React: Create a Component with Composition 9/47

freeCodeCamp.org React: Create a React Component 8/47

Objective: The other way to define a React component is with the ES6 class syntax. In the following example, Kitten extends React.Component: This creates an ES6 class Kitten which extends the React.Component class. So the Kitten class now has access to many useful React features, such as local state and lifecycle hooks. Don’t worry if… Continue reading freeCodeCamp.org React: Create a React Component 8/47

freeCodeCamp.org React: Create a Stateless Functional Component 7/47

Objective: Components are the core of React. Everything in React is a component and here you will learn how to create one.There are two ways to create a React component. The first way is to use a JavaScript function. Defining a component in this way creates a stateless functional component. The concept of state in… Continue reading freeCodeCamp.org React: Create a Stateless Functional Component 7/47

freeCodeCamp.org React: Render HTML Elements to the DOM 4/47

Objective: So far, you’ve learned that JSX is a convenient tool to write readable HTML within JavaScript. With React, we can render this JSX directly to the HTML DOM using React’s rendering API known as ReactDOM.ReactDOM offers a simple method to render React elements to the DOM which looks like this: ReactDOM.render(componentToRender, targetNode), where the… Continue reading freeCodeCamp.org React: Render HTML Elements to the DOM 4/47

freeCodeCamp.org React: Create a Simple JSX Element 1/47

Objective: Intro: React is an Open Source view library created and maintained by Facebook. It’s a great tool to render the User Interface (UI) of modern web applications.React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full… Continue reading freeCodeCamp.org React: Create a Simple JSX Element 1/47

R2D006 #100DaysOfCode

Today I finished adapting template to what Edwin wants, although I think he will need some more changes. Meanwhile he decided to create MySQL database, which I have done too. That is actually nothing new, as I have done PHP with Mr Mischook and I would have carried on with him, but sadly he decided… Continue reading R2D006 #100DaysOfCode

R2D005 #100DaysOfCode

Another day full of adventures. I had to betray VIM for a minute as I don’t know how to use multiple files there, but I am sure I would be a lot more efficient to do it there what I do in Sublime, which is just so slow and just hard really… I covered Edwin… Continue reading R2D005 #100DaysOfCode

R2D004 #100DaysOfCode

So I am learning more and more about vim and it’s cool features. It looks like this at the moment: So this is my configuration file I downloaded from GitHub from guy called simonista. I commented lines 93-99 and added my only one addition, my colour scheme, which is elflord. I have no idea about… Continue reading R2D004 #100DaysOfCode

R2D003 #100DaysOfCode

So today I managed to set up VIM under Windows, I downloaded configuration template from GitHub and tweaked it a little so it doesn’t hurt me 🙂 It has it’s colorscheme set to elflord and lines are now numbered, which is great! I don’t think I will now digging into SublimeText2, but I will likely… Continue reading R2D003 #100DaysOfCode